<template>
	<view class="w-[100%] relative">
		<image src="@/static/images/index_bg/bg_index.png" class="w-[100%] h-[396rpx] z-[-1] absolute top-0"></image>
		<view class="px-[42rpx]" :style="{ paddingTop: menuButtonInfoBottom + 'px' }">
			<view class="flex justify-center pt-[82rpx]">
				<up-avatar v-if="!userStore.isLogin" size="156rpx" :src="userStore.avatar"></up-avatar>
				<avatar-upload v-else :size="156" rounded="50%" :is_avatar="true" text_mag="上传头像" @update:modelValue="change" :modelValue="userStore.avatar" :isAvatar="true" />
			</view>
			<view class="text-[#000000] text-[32rpx] font-[500] font-[PingFang SC] flex justify-center mt-[20rpx]"
				@click="showNicknamePopup = true">
			{{ userStore.nickName }}
			</view>


			<up-popup :show="showNicknamePopup" @close="showNicknamePopup = false" mode="center" round="10">
			    <view class="p-[40rpx] w-[500rpx] bg-white rounded-[16rpx]">
			        <view class="text-center text-[32rpx] font-[500] mb-[30rpx]">修改昵称</view>
			        <input
			            type="nickname"
			            v-model="nicknameInput"
			            placeholder="请输入新昵称"
			            border="bottom"
			            :customStyle="{marginBottom: '30rpx'}"
			        />
			        <view class="flex gap-[20rpx] mt-[20rpx]">
			            <button
			                class="flex-1 border-[0] h-[80rpx] flex items-center justify-center bg-[#F5F5F5] text-[#333] rounded-[100rpx]"
			                @click="showNicknamePopup = false"
			            >取消</button>
			            <button
			                class="flex-1 h-[80rpx] flex items-center justify-center bg-[#C0FF00] text-[#000] rounded-[100rpx] font-bold"
			                @click="confirmNickname"
			            >确定</button>
			        </view>
			    </view>
			</up-popup>
			
		</view>
		<!-- 功能单 -->
		<view class="mx-[40rpx] flex justify-between items-center bg-[#FFFFFF] qaz mt-[32rpx] ">
			<!-- 功能列表 -->
			<view class="flex justify-center items-center ">
				<image src="@/static/images/img/cwp.png" class="w-[120rpx] h-[120rpx]"></image>
				<view class="ml-[22rpx]">
					<view class="text-[28rpx] text-[#000000]">电子宠物牌</view>
					<view class="qwe mt-[12rpx]">MY CARD</view>
				</view>
			</view>
			<view>
				<image src="@/static/images/img/dak.png" class="w-[80rpx] h-[80rpx] mr-[24rpx]"></image>
			</view>
		</view>
	
		<view  class="mx-[40rpx] flex justify-between items-center bg-[#FFFFFF] qaz mt-[32rpx] ">
			<view class="flex justify-center items-center ">
				<image src="@/static/images/img/fazi.png" class="w-[120rpx] h-[120rpx]"></image>
				<view class="ml-[22rpx]">
					<view class="text-[28rpx] text-[#000000]">我的家庭管理</view>
					<view class="qwe mt-[12rpx]">MY HOMES</view>
				</view>
			</view>
		
				<image @click="push('/pages_cw/homemanagement/homemanagement')" src="@/static/images/img/dak.png" class="w-[80rpx] h-[80rpx] mr-[24rpx]"></image>
			
		</view>
		<view  class="mx-[40rpx] flex justify-between items-center bg-[#FFFFFF] qaz mt-[32rpx] ">
			<view class="flex justify-center items-center " >
				<image src="@/static/images/img/cw.png" class="w-[120rpx] h-[120rpx]"></image>
				<view class="ml-[22rpx]">
					<view class="text-[28rpx] text-[#000000]">我的宠物管理</view>
					<view class="qwe mt-[12rpx]">MY PETS</view>
				</view>
			</view>
			<image @click="push('/pages_cw/petmanagement/petmanagement')" src="@/static/images/img/dak.png" class="w-[80rpx] h-[80rpx] mr-[24rpx]"></image>
		</view>
		<view class="mx-[40rpx] flex justify-between items-center bg-[#FFFFFF] qaz mt-[32rpx] ">
		
			<view class="flex justify-center items-center ">
				<image src="@/static/images/img/xq.png" class="w-[120rpx] h-[120rpx]"></image>
				<view class="ml-[22rpx]">
					<view class="text-[28rpx] text-[#000000]">我的设备管理</view>
					<view class="qwe mt-[12rpx]">MY DEVICE</view>
				</view>
			</view>
			<image  @click="push('/pages_cw/equipment/equipment')"  src="@/static/images/img/dak.png" class="w-[80rpx] h-[80rpx] mr-[24rpx]"></image>
		</view>
		<!-- 按钮 -->
		<view v-if="userStore.isLogin" @click="userStore.logOut" class="w-[538rpx] h-[108rpx] text-[#000000] fixed bottom-[196rpx] " style=" border-radius: 400rpx;left: 50%; transform: translateX(-50%) ">
            <image src="@/static/images/img/tcdl.png" class="w-[538rpx] h-[108rpx]"></image>
        </view>
	</view>
	<tabBar />

</template>

<script setup>
import {
	onLoad,onShow
} from '@dcloudio/uni-app';
import {
	ref
} from 'vue';
import {setUserInfo} from '@/api/system/user'

import { getFamilyList } from '@/api/home.js'
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();

// 修改头像
const change = (res) => {
	setUserInfo({
		avatar: res,
		userId: userStore.userId
	}).then((ress) => {
		if(ress.code == 200){
			userStore.getInfo(userStore.userId)
		}
	})
}


const menuButtonInfoBottom = ref(90) // 胶囊按钮信息
onShow(()=>{
	if(userStore.userId){
		userStore.getInfo(userStore.userId)
	}
})
onLoad(() => {
	menuButtonInfoBottom.value = uni.getMenuButtonBoundingClientRect().bottom || 90;
	console.log(uni.getMenuButtonBoundingClientRect())
})

const showNicknamePopup = ref(false);
const nicknameInput = ref(userStore.nickName || '');

// 确认修改昵称
const confirmNickname = () => {
    if (!nicknameInput.value.trim()) {
        uni.showToast({ title: '请输入昵称', icon: 'none' });
        return;
    }
    setUserInfo({ nickName: nicknameInput.value , userId:userStore.userId}).then(res => {
        if (res.code === 200) {
            userStore.getInfo(userStore.userId);
            showNicknamePopup.value = false;
            uni.showToast({ title: '修改成功', icon: 'success' });
        } else {
            uni.showToast({ title: res.msg || '修改失败', icon: 'none' });
        }
    });
};
</script>

<style lang="scss" scoped>
// .xb {
// 	width: 80rpx;
// 	height: 80rpx;
// 	background-image: url('@/static/images/img/djtb.png');
// 	background-repeat: no-repeat;
// 	background-size: 120rpx 120rpx; /* 根据实际雪碧图尺寸调整 */
// 	background-position: -20rpx -10rpx; /* 调整位置以显示所需图标 */
// }

.qwe {

	font-size: 36rpx;
	font-weight: normal;
	line-height: 18px;
	letter-spacing: normal;
	background: linear-gradient(180deg, #D3D3D3 0%, rgba(209, 209, 209, 0) 94%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.qaz{
	width: 670rpx;
height: 156rpx;
	border-radius: 24rpx;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
box-sizing: border-box;
border: 2rpx solid #FFFFFF;
box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.0215);
}
</style>